<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>购票确认</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="__PUBLIC__/Css/my.css" rel="stylesheet">

    <script src="__PUBLIC__/Js/my.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <include file="Public:top" title="购票确认"/>

    <input type="text" value="{$sch.schID}" id="schId" hidden>
    <input type="text" value="{$sch.schID}" id="schStartStationCode" hidden>

    <div class="row confirm-time">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="left">
            乘车时间:{$schedule.sch_date} &nbsp;{$schedule.sch_time}
            <span style="float: right">{$schedule.bus_type}</span>
        </div>
    </div>

    <div class="row confirm-target">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" align="center">
            {$schedule.start_station}
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" align="center">
            <img src="__PUBLIC__/images/arrow-right-md.png">
        </div>
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" align="center">
            {$schedule.end_station}
        </div>
    </div>

    <div class="row" style="font-size: medium;">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center" style="margin-top: 5px;">
            单价:<span style="color:red;">￥{$schedule.fare}</span>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="center">
            <img src="__PUBLIC__/images/minus-25.png" class="round-img" id="minus" onclick="compute('-1')">
            <input type="text" id="ticket-count"
                   style="width: 50px;margin:5px 5px 0px 5px;height:30px;text-align: center" readonly
                   value="1" align="center">
            <img src="__PUBLIC__/images/plus-25.png" class="round-img" style="background-color: #3399ff;" id="plus"
                 onclick="compute('1')">
        </div>
    </div>

    <div class="row confirm-count">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="left">
            取票信息
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12" style="color:red;margin-bottom: 10px;">
            *请确保以下信息填写无误
        </div>
    </div>
    <div class="row info-row" style="border-bottom: solid darkgray 1px;">
        <span>取票人:</span>
        <input type="text" class="none-input" placeholder="取票人真实姓名" id="name">

        <div style="display: inline;padding:5px;background-color: #ff5c0a;float:right;border-radius: 5px;"
             onclick="chooseBuyer()">选择取票人
        </div>
    </div>
    <div class="row info-row" style="border-bottom: solid darkgray 1px;">
        <span>手机:</span>
        <input type="text" class="none-input" placeholder="取票人手机号码" id="phone">
    </div>
    <div class="row info-row" style="border-bottom: solid darkgray 1px;">
        <span>身份证:</span>
        <input type="text" class="none-input" placeholder="取票人身份证号码" id="identity">
    </div>

    <div class="row confirm-pay">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            总计:<span style="color:red" id="fare-count">￥{$schedule.fare}</span>
            <input type="hidden" value="{$schedule.fare}" id="fare-count-input">
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" align="right">
            <div id="msg" style="color: red"></div>
            <div onclick="onConfirm()" style="display:inline;border-radius: 5px;background-color: #2B79FF;padding:5px 10px 5px 10px;color:white">
                <img
                        src="">提交订单
            </div>
        </div>
    </div>
</div>
<!--container ends here-->
<!-- 选择取票人模态框 -->
<div class="modal fade" id="choose-dialog" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" style="position:absolute;top:15%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #3399ff;padding: 5px;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" style="color:white;">点击选择取票人</h4>
            </div>
            <div class="modal-body"
                 style="height:250px;border: none;overflow: auto;padding-top:10px;padding-bottom: 5px;">
                <empty name="buyerlist">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center"
                             style="font-size: large;color:gray;">
                            暂无取票人信息
                        </div>
                    </div>
                    <else/>
                    <foreach name="buyerlist" item="buyer">
                        <div class="row" style="border-bottom: darkgray solid 1px;padding: 5px 0px 5px 0px;"
                             id="{$buyer.name},{$buyer.phone},{$buyer.identity}" onclick="onBuyerClick(this)">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="row">
                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                        姓名:{$buyer.name}
                                    </div>
                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                        手机:{$buyer.phone}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        身份证:{$buyer.identity}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </foreach>
                </empty>
            </div>
            <div class="modal-footer" style="padding: 5px;margin-top: 0px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    /**
     * 计算价格
     * @param type
     */
    function compute(type) {
        var ticketCount = parseInt($("#ticket-count").val().trim());
        if (type == 1) {
            $("#ticket-count").val(ticketCount + 1);
            var schFare = parseInt("{$schedule.fare}");
            var fareCount = schFare * (ticketCount + 1);
            $("#fare-count").html("￥" + fareCount);
            $("#fare-count-input").val(fareCount);
        }
        if (type == -1) {
            if (ticketCount == 1) {
                return;
            }
            $("#ticket-count").val(ticketCount - 1);
            var schFare = parseInt("{$schedule.fare}");
            var fareCount = schFare * (ticketCount - 1);
            $("#fare-count").html("￥" + fareCount);
            $("#fare-count-input").val(fareCount);
        }
    }


    function onBuyerClick(item) {
        //alert(item.id);
        var arr = item.id.split(",");
        $("#name").val(arr[0]);
        $("#phone").val(arr[1]);
        $("#identity").val(arr[2]);
        $("#choose-dialog").modal('hide');
    }

    function chooseBuyer() {
        $("#choose-dialog").modal('show');
    }

    function onConfirm() {
        if (!checkInfo('name', 'phone', 'identity')) {
            return;
        }
        var lockInfo = "";
        for (var i = 0; i < parseInt($("#ticket-count").val()); i++) {
            lockInfo += "1";
        }

        //todo 向中间件接口提交下单信息进行锁票操作
        if(ticketLock("{$schedule.station_code}","{$schedule.schid}",lockInfo,$("#ticket-count").val(),"{$schedule.fare}",$("#fare-count-input").val()))
        {
            var orderId = localStorage.getItem("orderId");
            window.location.href = "/?m=Home&c=Buy&a=pay&orderId="+orderId;
        }

    }

    function ticketLock(stationCode, schID, lockInfo, ticketQty, ticketFee, ticketAmt) {
        var name = $("#name").val();
        var phone = $("#phone").val();
        var identity = $("#identity").val();

        var flag=false;
        var url = "{:u('ticketLock')}";
        var param = {
            stationCode: stationCode,//车站代码
            schID: schID,//班次号
            lockInfo: lockInfo,
            ticketQty: ticketQty,
            ticketFee: ticketFee,
            ticketAmt: ticketAmt ,//总票价
            name: name,
            phone: phone,
            identity: identity
        };
        $.ajax({
            type: "post",
            url: url,
            dataType: 'json',
            data: param,
            async:false,
            success: function (data) {
                $(data).each(function (key, item) {
                    if (item.status == "ok") {
                        flag=true;
                        localStorage.setItem("orderId",item.orderId);
                    }
                    else {
                        $("#msg").html(item.msg);
                    }
                });
            },
            error:function(msg)
            {
                $("#msg").html("网络异常,提交订单失败");
            }
        });
        return flag;
    }
</script>
</body>
</html>